Talk:XForms/Horizontal File Tab Menu
Latest comment: 15 years ago by LeighKlotz in topic errors in linked example
Ideally we would like to use a system that did not rely on colors and would change the unselected tabs to be a different style.
The :target pseudo tag is a good candidate.
Here is a sample:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema">
<head>
<title>CSS: a tabbed interface</title>
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
div.horiz-tabs-menu {
min-height: 7em; /* No height: can grow if :target doesn't work */
position: relative; /* Establish a containing block */
line-height: 1; /* Easier to calculate with */
z-index: 0;
} /* So that we can put other things behind */
div.horiz-tabs-menu div {
display: inline;
} /* We want the buttons all on one line */
/* style the tabs */
div.horiz-tabs-menu div a {
color: black; /* Looks more like a button than a link */
background: #CCC; /* Active tabs are light gray */
font-family: Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0.2em; /* Some breathing space */
border: 0.1em outset #BBB; /* Make it look like a button */
-moz-border-radius: .5em .5em 0em 0em;
border-bottom: 0.1em solid #CCC;
} /* Visually connect tab and tab body */
div.horiz-tabs-menu2 xf|trigger {
color: black; /* Looks more like a button than a link */
background: yellow; /* Active tabs are light gray */
border: 0.1em outset #BBB; /* Make it look like a button */
border-bottom: 0.1em solid #CCC;
font-weight: bold;
font-family: Helvetica, sans-serif;
margin-right: 5px;
padding: 0.2em;
/* the following only works under FireFox */
-moz-border-radius: .5em .5em 0em 0em;
}
div.horiz-tabs-menu div:not(:target) a {
border-bottom: none; /* Make the bottom border disappear */
background: #999;
} /* Inactive tabs are dark gray */
div.horiz-tabs-menu2 xf|trigger:not(:target) {
border-bottom: none; /* Make the bottom border disappear */
background: #999;
} /* Inactive tabs are dark gray */
div.horiz-tabs-menu div:target a, /* Apply to the targeted item or... */
:target #default2 a { /* ... to the default item */
border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
background: #CCC;
} /* Active tab is light gray */
/* Apply to the targeted item or... */
div.horiz-tabs-menu2 xf|trigger:target,
selected { /* ... to the default item */
border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
background: red;
} /* Active tab is light gray */
div.horiz-tabs-menu div:not(:target) a {
border-bottom: none; /* Make the bottom border disappear */
background: #999;
} /* Inactive tabs are dark gray */
div.horiz-tabs-menu3 xf|trigger:not(:target) {
border-bottom: none; /* Make the bottom border disappear */
background: #999;
} /* Inactive tabs are dark gray */
/* Style the content to be swapped in */
div.horiz-tabs-menu div div {
background: #CCC; /* Light gray */
z-index: -2; /* Behind, because the borders overlap */
left: 0; top: 1.3em; /* The top needs some calculation... */
bottom: 0; right: 0; /* Other sides flush with containing block */
overflow: auto; /* Scroll bar if needed */
padding: 0.3em; /* Looks better */
border: 0.1em outset #BBB; /* 3D look */
}
xf|switch xf|case {
background: #CCC; /* Light gray */
top: 1.3em; /* The top needs some calculation... */
padding: 0.3em; /* Looks better */
border: 0.1em outset #BBB; /* 3D look */
} /* 3D look */
div.horiz-tabs-menu div:not(:target) div { /* Protect CSS1 CSS2 browsers */
position: absolute;
} /* All these DIVs overlap */
div.horiz-tabs-menu div:target div, :target #default2 div {
position: absolute; /* All these DIVs overlap */
z-index: -1;
} /* Raise it above the others */
</style>
</head>
<body>
<div class="horiz-tabs-menu">
<div id="tab1">
<a href="#tab1">Tab 1</a>
<div>One might well argue, that...</div>
</div>
<div id="tab2">
<a href="#tab2">Tab 2</a>
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab3">
<a href="#tab3">Tab 3</a>
<div>... that 2 should have been enough, but...</div>
</div>
<div id="default2">
<a href="#default2">Default</a>
<div>... it works!</div>
</div>
</div>
<hr/>
<div class="horiz-tabs-menu2">
<xf:trigger class="selected" appearance="minimal">
<xf:label>Tab 1</xf:label>
<xf:toggle case="case-1" ev:event="DOMActivate"/>
</xf:trigger>
<xf:trigger appearance="minimal">
<xf:label>Tab 2</xf:label>
<xf:toggle case="case-2" ev:event="DOMActivate"/>
</xf:trigger>
<xf:trigger appearance="minimal">
<xf:label>Tab 3</xf:label>
<xf:toggle case="case-3" ev:event="DOMActivate"/>
</xf:trigger>
</div>
<xf:switch>
<xf:case id="case-1" selected="true()">
<div>
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
</div>
</xf:case>
<xf:case id="case-2">
<div>
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
</div>
</xf:case>
<xf:case id="case-3">
<div>
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
</div>
</xf:case>
</xf:switch>
<hr/>
</body>
</html>
errors in linked example[edit source]
The linked example has three errors:
- element style should be in head, not a peer to it.
- element style is missing attribute type="text/css"
- element case attribute selected is a true|false enumeration, not an XPath expression and so should be selected="true"
(The first case is by default selected, so this case be omitted, or moved to another case.)